<template>
  <div class="right-board">
    <div class="logo-wrapper" style="height:56px">
      <div class="logo">列表属性</div>
    </div>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <!-- 页面样式 -->
        <div class="panel-box">
          <div class="titleFont" style="marginBottom: 20px">
            输入型组件
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='normal'}">
            <div :class="{'normalTable':true,'active':rightConfig.panelType==='normal'}"></div>
            <div>普通表格</div>
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='left'}">
            <div :class="{'treeTable':true,'active':rightConfig.panelType==='left'}"></div>
            <div>左侧树形+普通表格</div>
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='data'}">
            <div :class="{'panelTable':true,'active':rightConfig.panelType==='data'}"></div>
            <div>数据面板</div>
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='left-data'}">
            <div :class="{'treePanelTable':true,'active':rightConfig.panelType==='left-data'}">
            </div>
            <div>左侧树形+数据面板</div>
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='tree-list'}">
            <div :class="{'treeList':true,'active':rightConfig.panelType==='tree-list'}">
            </div>
            <div>树形列表</div>
          </div>
          <div class="panel-item" @click="()=>{rightConfig.panelType='grouping'}">
            <div :class="{'treeList':true,'active':rightConfig.panelType==='grouping'}">
            </div>
            <div>列表分组</div>
          </div>
        </div>
        <!-- 组件属性 -->
        <el-form size="small" label-width="90px" :model="rightConfig" ref="rightPanel">
          <template v-if="rightConfig.panelType==='grouping'">
           <el-divider>分组设置</el-divider>
            <el-form-item label="分组字段">
              <el-select v-model="rightConfig.groupField" placeholder="请选择分组字段" size="small">
                <el-option v-for="item in fieldName" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <div class="titleFont">表头配置</div>
          <!-- <el-divider>表头配置</el-divider> -->
          <el-form-item label="多级表头">
            <el-switch v-model="rightConfig.tableHeaderConfig.multistage" size="small"></el-switch>
          </el-form-item>
          <template>
            <div style="padding: 0px 20px" v-if="rightConfig.tableHeaderConfig.multistage">
                <div class="headerTextCss">
                    <span class="textTipCss" @click="addTableHeader">添加表头</span>
                    <el-button size="mini" class="headerBtn" type="primary" @click="editTreeNode">{{viewModel ? '编辑' : '完成'}}</el-button>
                </div>
                <div>
                    <el-tree
                        :data="treeData"
                        node-key="id"
                        default-expand-all
                        :props="defaultProps"
                        draggable
                        ref="headerTreeRef"
                        :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span v-if="viewModel" class="nodeLabelCss" :title="data.name">{{data.name}}</span>
                            <el-input :value="data.name" v-else @input="(val) => nodeInputChange(val, data)" size="mini" style="width:100px" class="nodeInput"></el-input>
                            <span style="display:inline-block;float:right;padding-right:5px">
                                <i v-if="node.level < 3" class="el-icon-plus iconCss" @click="addChildrenLeaf(node, data)"></i>
                                <el-popover
                                    placement="top"
                                    width="120">
                                    <div v-if="updateLabelView">
                                        <div :title="field.label" class="fieldTextCss" :class="field.disabled ? 'noallow' : (selectIndex === idx && !field.disabled) ? 'filedLight' : ''"
                                            v-for="(field, idx) in allFieldList" :key="idx"
                                            @mouseover="selectIndex = idx"
                                            @click="labelSelect(field, idx, node, data)">
                                            {{field.label}}
                                        </div>
                                    </div>
                                    <i v-if="node.level < 3" class="el-icon-circle-plus-outline iconCss" slot="reference"></i>
                                </el-popover>
                                <i class="el-icon-delete iconCss" @click="deleteNode(node, data)"></i>
                                <i class="el-icon-rank" style="cursor: move;margin-left:3px"></i>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
          </template>
          <!-- <el-divider>排序设置</el-divider> -->
          <div class="titleFont">排序设置</div>
          <el-form-item label="排序字段">
            <el-select v-model="rightConfig.sortConfig.field" clearable placeholder="请选择排序字段" size="small">
              <el-option v-for="item in fieldName" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序类型">
            <el-select v-model="rightConfig.sortConfig.type" clearable placeholder="请选择排序类型" size="small">
              <el-option label="降序" value="desc">
              </el-option>
              <el-option label="升序" value="asc">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-divider>分页设置</el-divider> -->
          <div class="titleFont">分页设置</div> <!-- 树形列表不能分页-->
          <el-form-item label="是否分页">
            <el-switch v-model="rightConfig.paginationConfig.isPag" size="small" :disabled="rightConfig.panelType==='tree-list'"></el-switch>
          </el-form-item>
          <el-form-item label="分页条数">
            <el-radio-group v-model="rightConfig.paginationConfig.pageSize" size="mini">
              <el-radio-button label="10条"></el-radio-button>
              <el-radio-button label="20条"></el-radio-button>
              <el-radio-button label="30条"></el-radio-button>
              <el-radio-button label="50条"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- <el-divider>序号</el-divider> -->
          <div class="titleFont">序号</div>
          <el-form-item label="显示序号">
            <el-switch v-model="rightConfig.colConfig.showIndex" size="small"></el-switch>
          </el-form-item>
          <div v-show="rightConfig.colConfig.showIndex">
            <el-input v-model="rightConfig.colConfig.indexName" size="small" style="marginRight:10px;width:48%;">
            </el-input>
            <el-input-number v-model="rightConfig.colConfig.indexSize" size="small" :min="0" style="marginRight:10px;"
              controls-position="right">
            </el-input-number>px
          </div>
          <!-- <el-divider>列设置</el-divider> -->
          <div class="titleFont">列设置</div>
          <el-form-item label="左固定列">
            <el-input-number :min="0" v-model="rightConfig.colConfig.leftCol" size="small" style="marginRight:10px;"
              controls-position="right"></el-input-number>列
          </el-form-item>
          <el-form-item label="右固定列">
            <el-input-number :min="0" v-model="rightConfig.colConfig.rightCol" size="small" style="marginRight:10px;"
              controls-position="right">
            </el-input-number>列
          </el-form-item>
          <!-- <el-divider>按钮配置</el-divider> -->
          <div class="titleFont">按钮配置</div>
          <div class="addBtn">
            <el-dropdown size="small" @command="handleCommand">
              <!-- <el-button type="primary" icon="el-icon-plus" circle size="mini"></el-button> -->
              <div style="display: flex">
                <div class="iconAdd">
                    <i class="el-icon-plus"></i> 
                  </div>
                <span class="el-dropdown-link">
                  添加按钮
                </span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="insert" :disabled="hasExit('新增')">新增</el-dropdown-item>
                <el-dropdown-item command="del" :disabled="hasExit('删除')">删除</el-dropdown-item>
                <el-dropdown-item command="edit" :disabled="hasExit('编辑')">编辑</el-dropdown-item>
                <el-dropdown-item command="copy" :disabled="hasExit('复制')">复制</el-dropdown-item>
                <el-dropdown-item command="view" :disabled="hasExit('查看')">查看</el-dropdown-item>
                <!-- <el-dropdown-item command="change" :disabled="hasExit('变更')">变更</el-dropdown-item> -->
                <el-dropdown-item command="import" :disabled="hasExit('导入')">导入</el-dropdown-item>
                <el-dropdown-item command="export" :disabled="hasExit('导出')">导出</el-dropdown-item>
                <el-dropdown-item command="multiDel" :disabled="hasExit('批量删除')">批量删除</el-dropdown-item>
                <!-- <el-dropdown-item command="multiApproval" :disabled="hasExit('批量发起审批')">批量发起审批</el-dropdown-item> -->
                <!-- <el-dropdown-item command="approval" :disabled="hasExit('发起审批')">发起审批</el-dropdown-item> -->
                <el-dropdown-item command="accessoryDownload" :disabled="hasExit('附件下载')">附件下载</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <draggable :list="rightConfig.btnConfig" :animation="340" group="selectBtn" handle=".option-drag">
            <div v-for="(item, index) in rightConfig.btnConfig" :key="index" class="select-item">
              <div>{{item.text}}</div>
              <div class="select-line-icon">
                <i class="el-icon-setting" style="padding:0 5px;" @click="setBtn(item)" />
                <i class="el-icon-delete" style="padding:0 5px;" @click="delBtn(index)" />
                <i class="el-icon-rank  option-drag" style="padding:0 5px;" />
              </div>
            </div>
          </draggable>
          <template v-if="rightConfig.panelType==='left'||rightConfig.panelType==='left-data'">
            <!-- <el-divider>左侧设置</el-divider> -->
            <div class="titleFont">左侧设置</div>
            <el-form-item label="左侧标题">
              <el-input placeholder="请输入左侧标题" v-model="rightConfig.leftConfig.title" size="small"></el-input>
            </el-form-item>
            <el-form-item label="数据来源">
              <el-select placeholder="请选择数据来源" v-model="rightConfig.leftConfig.datasource" size="small" clearable>
                <el-option label="数据源" value="datasource"></el-option>
                <el-option label="数据字典" value="dict"></el-option>
                <el-option label="部门数据" value="depart"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="rightConfig.leftConfig.datasource==='datasource'">
              <el-form-item label="数据选项">
                <el-select placeholder="请选择数据表" v-model="rightConfig.leftConfig.table" size="small"
                  @change="updateFields">
                  <el-option v-for="(item,index) in tableOptions" :key="index" :label="item.label" :value="item.value" style="width:227px;">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示字段">
                <el-select placeholder="请选择显示字段" v-model="rightConfig.leftConfig.showField" size="small" @change="updateShowFieldName">
                  <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="子级字段">
                <el-select placeholder="请选择子级字段" v-model="rightConfig.leftConfig.childField" size="small">
                  <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <el-form-item label="数据字典" v-if="rightConfig.leftConfig.datasource==='dict'">
              <el-select placeholder="请选择数据字典" v-model="rightConfig.leftConfig.dict" size="small" @change="updateDictName">
                <el-option v-for="(dict,index) in dictOptions" :key="index" :label="dict.label" :value="dict.value" style="width:227px;"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联字段">
              <el-select placeholder="请选择关联字段" v-model="rightConfig.leftConfig.field" size="small">
                <el-option v-for="item in fieldName" :key="item.value" :label="item.label" :value="item.value" style="width:227px;">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
          <template v-if="rightConfig.panelType==='data'||rightConfig.panelType==='left-data'">
            <!-- <el-divider>数据面板</el-divider> -->
            <div class="titleFont">数据面板</div>
            <div v-for="(item,index) in rightConfig.panelConfig" :key="index" class="dataPanel">
              <el-form-item label="标题">
                <el-input placeholder="请输入标题" v-model="item.title" size="small"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selected" />
                  <el-input slot="reference" v-model="item.icon" placeholder="点击选择图标" readonly
                    @focus="()=>{currentIndex=index}">
                    <svg-icon v-if="item.icon" slot="prefix" :icon-class="item.icon" class="el-input__icon"
                      style="height: 32px; width: 16px" />
                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
              <el-form-item label="图标颜色">
                <el-color-picker v-model="item.iconColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="图标背景色">
                <el-color-picker v-model="item.iconBackColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="背景色">
                <el-color-picker v-model="item.backColor" size="small"></el-color-picker>
              </el-form-item>
              <el-form-item label="显示字段">
                <el-select placeholder="请选择显示字段" v-model="item.field" size="small" @change="selectSumType(item,$event)">
                  <el-option v-for="opt in fieldName" :key="opt.value"
                    :label="opt.label" :value="opt.value" style="width:227px;">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计算方式">
                <el-select placeholder="请选择计算方式" v-model="item.method" size="small" @visible-change="visibleCount(item,$event)">
                  <el-option v-for="suminfo in sumTypeList" :key="suminfo.value" :label="suminfo.label" :value="suminfo.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单位">
                <el-input placeholder="请输入单位" v-model="item.unit" size="small"></el-input>
              </el-form-item>
              <el-form-item style="marginLeft:54px">
                <el-button icon="el-icon-delete" type="danger" size="small" circle @click="delPanel(index)"></el-button>
              </el-form-item>
            </div>
            <div class="dataAdd">
              <el-button icon="el-icon-plus" type="primary" size="small" @click="addPanel"
              style="marginTop:10px;">添加</el-button>
            </div>
          </template>
          <template v-if="rightConfig.panelType==='tree-list'">
            <!-- <el-divider>树形列表</el-divider> -->
            <div class="titleFont">树形列表</div>
            <el-form-item label="子字段">
                <el-select clearable @visible-change="childrenChange" v-model="rightConfig.treeConfig.childrenParams" placeholder="请选择子字段" size="small">
                    <el-option v-for="item in fieldNameFilter" :key="item.value" :label="item.label" :value="item.value" style="width:290px;">
              </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="父字段">
                <el-select clearable @visible-change="parentChange" v-model="rightConfig.treeConfig.parentParams" placeholder="请选择父字段" size="small">
                    <el-option v-for="item in fieldNameFilter" :key="item.value" :label="item.label" :value="item.value" style="width:290px;">
              </el-option>
                </el-select>
            </el-form-item>
          </template>
        </el-form>
      </el-scrollbar>
    </div>
    <!-- 按钮设置弹窗 -->
    <el-dialog title="设置按钮" :visible.sync="btnSettingVisible" width="600px">
      <el-form :model="btnSetting" label-width="80px">
        <el-form-item label="按钮名称" :rules="[{required:true,message:'请输入按钮名称',trigger:'blur'}]">
          <el-input v-model="btnSetting.text" placeholder="按钮名" size="small" />
        </el-form-item>
        <el-form-item label="按钮位置" :rules="[{required:true,message:'请选择按钮位置',trigger:'blur'}]">
          <el-radio-group v-model="btnSetting.position" :disabled="btnSetting.label==='批量删除'||btnSetting.label==='导入'">
            <el-radio-button label="table">表格操作</el-radio-button>
            <el-radio-button label="inline">行内操作</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="按钮颜色" :rules="[{required:true,message:'请选择按钮颜色',trigger:'blur'}]">
          <el-select v-model="btnSetting.type" style="width:100%" size="small">
            <el-option v-for="(opt,index) in btnStyles" :key="index" :label="opt.label" :value="opt.value">
              <el-link :type="opt.value" :underline="false">{{opt.label}}</el-link>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import IconSelect from "@/components/IconSelect";
  import {
    getAllFormName,
    getTableColumn,
    getDictName
  } from '@/api/custom/formDesigner'
  import draggable from 'vuedraggable'
import { deepClone } from '../../../utils';
import {toChineseNum} from '@/utils/toChineseNum'
import {listchoose, sourceTestList} from '@/api/custom/formDesigner'
  //按钮默认配置
  const btnConfig = {
    insert: {
      id:1,
      label: '新增',
      text: '新增',
      method: 'insertData',
      position: 'table',
      type: 'primary'
    },
    view: {
      id:2,
      label: '查看',
      text: '查看',
      method: 'viewData',
      position: 'inline',
      type: 'primary'
    },
    change: {
      id:3,
      label: '变更',
      text: '变更',
      method: 'changeData',
      position: 'inline',
      type: 'primary'
    },
    edit: {
      id:4,
      label: '编辑',
      text: '编辑',
      method: 'editData',
      position: 'inline',
      type: 'primary'
    },
    del: {
      id:5,
      label: '删除',
      text: '删除',
      method: 'delData',
      position: 'inline',
      type: 'danger'
    },
    copy: {
      id:6,
      label: '复制',
      text: '复制',
      method: 'copyData',
      position: 'inline',
      type: 'primary'
    },
    import: {
      label: '导入',
      text: '快速导入',
      method: '',
      position: 'table',
      type: 'default'
    },
    export: {
      label: '导出',
      text: '快速导出',
      method: 'exportToExcel',
      position: 'table',
      type: 'default'
    },
    approval: {
      label: '发起审批',
      text: '发起审批',
      method: 'approvalData',
      position: 'inline',
      type: 'primary'
    },
    multiDel: {
      label: '批量删除',
      text: '批量删除',
      method: 'multiDel',
      position: 'table',
      type: 'danger'
    },
    multiApproval: {
      label: '批量发起审批',
      text: '批量发起审批',
      method: 'multiApproval',
      position: 'table',
      type: 'default'
    },
    accessoryDownload: {
      label: '附件下载',
      text: '附件下载',
      method: 'accessoryDownloadData',
      position: 'table',
      type: 'default'
    }
  };
  export default {
    props: ['fieldName', 'rightConfig'],
    components: {
      IconSelect,
      draggable
    },
    data() {
      return {
        defaultProps: {
            label: 'name',
            children: 'children',
        },
        updateLabelView: Date.now(),
        treeData: [],
        filedMapperList: [], // 存储字段的集合
        selectIndex: -1,
        allFieldList: [],
        viewModel: true,
        currentIndex: 0, //当前数据面板索引
        //按钮样式选项
        btnStyles: [{
            label: '默认',
            value: 'default'
          },
          {
            label: '主要',
            value: 'primary'
          },
          {
            label: '成功',
            value: 'success'
          },
          {
            label: '警告',
            value: 'warning'
          },
          {
            label: '危险',
            value: 'danger'
          },
          {
            label: '信息',
            value: 'info'
          },
        ],
        tableOptions: [], //表选项
        dictOptions: [], //字典选项
        fieldOptions: [], //字段选项
        btnSettingVisible: false, //显示按钮设置弹窗
        btnSetting: {}, //按钮设置
        fieldNameFilter: [], // 父子各自选择的时候，互相去除
        fieldNameCopy: [], // 树形列表使用的选项下拉
        sumTypeList:[
          {label:'求和',value:'sum'},
          {label:'最大值',value:'max'},
          {label:'最小值',value:'min'},
          {label:'平均数',value:'avg'},
          {label:'去重',value:'rem'}
        ],
      }
    },
    created () {
        this.treeData = deepClone(this.rightConfig.tableHeaderConfig.treeHeaderData)
        if(this.fieldName.length>0){
          this.rightConfig.groupField=this.fieldName[0].value
        }
    },
    mounted() {
    
        this.fieldNameCopy = deepClone(this.fieldName)
        this.fieldNameFilter = [...this.fieldNameCopy]
        this.getAllTableNames() //获取所有表名
        this.getDictNames() //获取字典
        if (this.rightConfig.leftConfig.table !== '') {
            this.getFields(this.rightConfig.leftConfig.table) //获取表字段
        }
        // 组装所有字段
        this.allFieldList = this.fieldNameCopy.map(comp => {
            return {
                label: comp.label,
                value: comp.value,
                id: Date.now() + Math.floor(Math.random() * 100)
            }
        })
        this.loopSetFieldValue(this.rightConfig.tableHeaderConfig.treeHeaderData)
        // 初始化将已选过的字段置灰禁用
        this.allFieldList.forEach(rng => {
            if (this.filedMapperList.includes(rng.value)) {
                rng.disabled = true
            }
        })
    },
    methods: {
        // input触发事件
        nodeInputChange (value, data) {
            this.loopSetInputValue(this.treeData, data.id, value)
        },
        // 树形数据不支持setter值，不能使用v-model绑定input框
        loopSetInputValue (list, id, value) {
            list.forEach(item => {
                if (item.id === id) {
                    this.$set(item, 'name', value)
                }
                item.children && this.loopSetInputValue(item.children, id, value)
            })
        },
        // 初始化获取到所有字段
        loopSetFieldValue (list) {
            list.forEach(item => {
                if (item.value) {
                    this.filedMapperList.push(item.value)
                }
                item.children && this.loopSetFieldValue(item.children)
            })
        },
        // 点击编辑
        editTreeNode () {
            if (this.rightConfig.tableHeaderConfig.treeHeaderData.length === 0) {
                return this.$message.warning('请先添加表头')
            } else {
                this.viewModel = !this.viewModel
            }
            if (this.viewModel) {
                this.$emit('syncTreeData', this.treeData)
            }
        },
        // 选中字段时值处理
        labelSelect (field, index, node, data) {
            if (field.disabled) {
                return
            }
            const copyData = data.children || []
            copyData.push({name: field.label, id: Date.now(), value: field.value})
            this.$nextTick(() => {
                this.$refs.headerTreeRef.updateKeyChildren(data.id, [...copyData])
            })
            this.allFieldList[index].disabled = true
            this.$emit('syncTreeData', this.treeData)
        },
        // 添加表头
        addTableHeader () {
            const lengthIdx = this.rightConfig.tableHeaderConfig.treeHeaderData.length
            if (lengthIdx === 0) {
                this.treeData.push({
                    name: '一级选项',
                    id: Date.now()
                })
            } else {
                this.$refs.headerTreeRef.insertAfter({
                    name: '一级选项',
                    id: Date.now()
                }, this.rightConfig.tableHeaderConfig.treeHeaderData[lengthIdx - 1])
            }
            this.$emit('syncTreeData', this.treeData)
        },
        addChildrenLeaf (node, data) {
            const testObj = {
                name: toChineseNum(node.level + 1) + '级选项',
                id: Date.now(),
            }
            this.$nextTick(() => {
                this.$refs.headerTreeRef.append(testObj, data.id)
                this.$emit('syncTreeData', this.treeData)
            })
        },
        deleteNode (node, data) {
            this.$refs.headerTreeRef.remove(node)
            this.allFieldList.forEach(comp => {
                if (data.value && comp.value === data.value) {
                    this.$set(comp, 'disabled', false)
                }
            })
            this.updateLabelView = Date.now()
            this.$emit('syncTreeData', this.treeData)
        },
        childrenChange (flag) {
            if (flag && this.rightConfig.treeConfig.parentParams) {
                this.fieldNameFilter = []
                this.fieldNameCopy.forEach(comp => {
                    if (comp.value !== this.rightConfig.treeConfig.parentParams) {
                        this.fieldNameFilter.push(comp)
                    }
                })
            } else {
                this.fieldNameFilter = [...this.fieldNameCopy]
            }
        },
        parentChange (flag) {
            if (flag && this.rightConfig.treeConfig.childrenParams) {
                this.fieldNameFilter = []
                this.fieldNameCopy.forEach(comp => {
                    if (comp.value !== this.rightConfig.treeConfig.childrenParams) {
                        this.fieldNameFilter.push(comp)
                    }
                })
            } else {
                this.fieldNameFilter = [...this.fieldNameCopy]
            }
        },
        //添加数据面板
        addPanel() {
            this.rightConfig.panelConfig.push({
            title: '',
            icon: '',
            iconColor: '',
            iconBackColor: '',
            backColor: '',
            field: '',
            method: '',
            unit: ''
            })
        },
        //删除数据面板
        delPanel(num) {
            this.rightConfig.panelConfig.splice(num,1)
        },
        // 选择数据面板图标
        selected(name) {
            this.rightConfig.panelConfig[this.currentIndex].icon = name;
        },
        //获取所有表名
        getAllTableNames() {
            listchoose().then((res) => {
                if (res.code === 0) {
                    this.tableOptions = res.data.map((item) => {
                        return {
                            label: item.name,
                            value: item.id
                        }
                    })
                }
            }).catch(e => {
                console.log(e);
            })
        },
        //获取字典
        getDictNames() {
            getDictName().then((res) => {
            if (res.code === 0) {
                this.dictOptions = res.data.map((item) => {
                return {
                    label: item.name,
                    value: item.type
                }
                })
            }
            }).catch(e => console.log(e))
        },
        //获取表字段
        getFields(val) {
            sourceTestList(val).then((res) => {
                if (res.code === 0) {
                    this.fieldOptions = res.data?.columns.map((item) => {
                        return {label:item.name,value:item.name}
                    })
                }
            })
        },
        //换表，重新获取表字段
        updateFields(val) {
            this.rightConfig.leftConfig.showField = ''
            this.rightConfig.leftConfig.childField = ''
            this.rightConfig.leftConfig.showFieldName = ''
            this.getFields(val)
        },
        //添加按钮
        handleCommand(command) {
            this.rightConfig.btnConfig.push({
            ...btnConfig[command]
            })
        },
        //删除按钮
        delBtn(index) {
            this.rightConfig.btnConfig.splice(index, 1)
        },
        //设置按钮，显示弹窗
        setBtn(item) {
            this.btnSetting = item
            this.btnSettingVisible = true
        },
        //判断按钮是否已存在，已添加
        hasExit(name) {
            let btn = this.rightConfig.btnConfig.filter((item) => {
            return item.label === name
            })
            return btn.length > 0 ? true : false
        },
        //更新字典名
        updateDictName(val) {
            let dict = this.dictOptions.filter((item)=>{
            return item.value === val
            })
            this.rightConfig.leftConfig.dictName = dict[0].label
        },
        //更新显示字段名
        updateShowFieldName(val) {
            let field = this.fieldOptions.filter((item)=>{
                return item.value === val
            })
            this.rightConfig.leftConfig.showFieldName = field[0].label
        },
        selectSumType(val,t){
        let str = this.fieldName.find(info=>{
          return info.value === t;
        }).format;
        if(str.indexOf('int')>-1){
         this.sumTypeList = [
          {label:'求和',value:'sum'},
          {label:'最大值',value:'max'},
          {label:'最小值',value:'min'},
          {label:'平均数',value:'avg'}
         ];
        }else{
          this.sumTypeList = [
          {label:'求和',value:'sum'},
          {label:'去重',value:'rem'}
         ];
        }
        val.method = 'sum'
      },
      visibleCount(val,t){
       let str = this.fieldName.find(info=>{
          return info.value === val.field;
        }).format;
       if(t){
         if(str.indexOf('int')>-1){
          this.sumTypeList = [
          {label:'求和',value:'sum'},
          {label:'最大值',value:'max'},
          {label:'最小值',value:'min'},
          {label:'平均数',value:'avg'}
         ];
         }else{
          this.sumTypeList = [
          {label:'求和',value:'sum'},
          {label:'去重',value:'rem'}
         ];
         }
       }
      }
        }
  }

</script>
<style lang="scss">
  @import '@/styles/home';

</style>
<style lang="less" scoped>
.noallow{
    cursor: not-allowed;
    color: lightgrey;
}
.fieldTextCss {
    padding: 3px 0px;
    width: 100px;
    white-space: nowrap;
    /* 隐藏超出部分 */
    overflow: hidden;
    /* 显示省略号 */
    text-overflow: ellipsis;
    cursor: pointer;
}
.filedLight {
    color: #409EFF;
}
.iconCss{
    padding: 0px 3px;
}
/deep/ .el-input--mini .el-input__inner {
    height: 25px !important;
    line-height: 25px !important;
    cursor: text;
}
.nodeLabelCss{
    width: 150px;
    /* 设置文本溢出部分为省略号 */
    /* 不换行 */
    white-space: nowrap;
    /* 隐藏超出部分 */
    overflow: hidden;
    /* 显示省略号 */
    text-overflow: ellipsis;
}
.headerTextCss{
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    height: 35px;
}
.textTipCss{
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    color: #409EFF;
}
.headerBtn{
    float: right;
}
.right-board {
width: 360px;
border-left: 1px solid rgba(0,0,0,0.06);
position: absolute;
right: 0;
top: 0;
padding-top: 3px;
/deep/ .el-form-item__label{
  color: rgba(0,0,0,0.45);
}
.field-box {
    position: relative;
    height: calc(100vh - 56px);
    box-sizing: border-box;
    overflow: hidden;

    .panel-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;

    .panel-item {
        width: 35%;
        height: 70px;
        margin-bottom: 10px;
        // line-height: 50px;
        // border:1px solid #DCDFE6;
        text-align: center;
        font-size: 12px;

        .normalTable {
        width: 100%;
        height: 80%;
        background: url(../../../assets/images/normalTable.jpg) no-repeat;
        background-size: 100% 100%;
        }

        .treeTable {
        width: 100%;
        height: 80%;
        background: url(../../../assets/images/treeTable.jpg) no-repeat;
        background-size: 100% 100%;
        }

        .panelTable {
        width: 100%;
        height: 80%;
        background: url(../../../assets/images/panelTable.jpg) no-repeat;
        background-size: 100% 100%;
        }

        .treePanelTable {
        width: 100%;
        height: 80%;
        background: url(../../../assets/images/treePanelTable.jpg) no-repeat;
        background-size: 100% 100%;
        }

        .treeList {
        width: 100%;
        height: 80%;
        background: url(../../../assets/images/treeList.png) no-repeat;
        background-size: 100% 100%;
        }
    }

    .active {
        border: 1px solid #1890ff;
    }
    }
}

.el-scrollbar {
    height: 100%;
}
}

.addBtn {
text-align: left;
margin-bottom: 10px;

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
}

  .select-item {
    display: flex;
    // border: 1px dashed #fff;
    background: rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 14px;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 8px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 18px;
    padding: 0 4px;
    color: #777;
  }

  .option-drag {
    cursor: move;
  }

  .time-range {
    .el-date-editor {
      width: 227px;
    }

    ::v-deep .el-icon-time {
      display: none;
    }
  }

  .document-link {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    top: 0;
    left: 0;
    cursor: pointer;
    background: #409eff;
    z-index: 1;
    border-radius: 0 0 6px 0;
    text-align: center;
    line-height: 26px;
    color: #fff;
    font-size: 18px;
  }

  .node-label {
    font-size: 14px;
  }

  .node-icon {
    color: #bebfc3;
  }

  /* 选项卡相关 */
  .tabs-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    .close-btn {
      cursor: pointer;
      color: #f56c6c !important;
    }

    +.tabs-item {
      margin-top: 4px;
    }

    .tabs-line-icon {
      line-height: 32px;
      font-size: 22px;
      padding: 0 4px;
      color: #777;
    }

    .option-drag {
      cursor: move;
    }
  }
  .titleFont{
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #f0f0f0;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 550;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 18px;
  }
  .dataAdd{
    width: 100%;
    text-align: center;
    .el-button--small{
      border-radius: 2px;
    }
  }
</style>
